<!DOCTYPE html>
<html>
<head>
    <title>李峋爱心粒子效果</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #000;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // 设置画布尺寸
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);

        // 爱心参数方程
        function heartEquation(t) {
            const x = 16 * Math.pow(Math.sin(t), 3);
            const y = -13 * Math.cos(t) + 5 * Math.cos(2*t) + 2*Math.cos(3*t) + Math.cos(4*t);
            return {x, y};
        }

        // 粒子类
        class Particle {
            constructor() {
                this.reset();
                this.baseRadius = Math.random() * 2 + 1;
                this.radius = this.baseRadius;
            }

            reset() {
                const t = Math.random() * Math.PI * 2;
                const pos = heartEquation(t);
                const scale = 15;
                
                this.x = canvas.width/2 + pos.x * scale;
                this.y = canvas.height/2 + pos.y * scale;
                this.vx = (Math.random() - 0.5) * 0.2;
                this.vy = (Math.random() - 0.5) * 0.2;
                this.alpha = Math.random() * 0.5 + 0.5;
            }

            update() {
                this.x += this.vx;
                this.y += this.vy;
                
                // 呼吸效果
                this.radius = this.baseRadius + Math.abs(Math.sin(Date.now() * 0.002)) * 2;
                
                if (Math.random() < 0.005) this.reset();
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = `hsla(${Date.now() * 0.1 % 360}, 100%, 60%, ${this.alpha})`;
                ctx.fill();
            }
        }

        // 创建粒子数组
        const particles = Array.from({length: 300}, () => new Particle());

        // 动画循环
        function animate() {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            particles.forEach(particle => {
                particle.update();
                particle.draw();
            });

            requestAnimationFrame(animate);
        }

        animate();

        // 添加鼠标互动
        canvas.addEventListener('mousemove', (e) => {
            particles.forEach(particle => {
                const dx = e.clientX - particle.x;
                const dy = e.clientY - particle.y;
                const dist = Math.sqrt(dx*dx + dy*dy);
                
                if (dist < 100) {
                    particle.x -= dx * 0.02;
                    particle.y -= dy * 0.02;
                }
            });
        });
    </script>
</body>
</html>